<script lang="ts" setup>
    import type { DialogueList,MyInjection } from "@/api/auth/types";
    import { Plus} from '@element-plus/icons-vue'
    import avatarImg from "@/assets/images/avatar/long.gif";
    import useClipboard from "vue-clipboard3";
    // 使用插件
    const { toClipboard } = useClipboard();

	const props = defineProps({
        dialogueList:{
            type:Array as PropType<DialogueList[]>,
            required: true,
        },
        disabledvalue:{
            type:Boolean,
            required: true,
        },
        sessionType:{
            type:Number,
            required: true,
        },
        customertran:{
            type:Boolean,
            required: true,
        },
        isShowSlots:{
            type:Boolean,
            required: true,
        },
        custQualityTest:{
            type:Boolean,
            required:false
        }
    });
      //注入 爷爷组件定义的方法
    if (props.customertran)var onClickStart = inject<MyInjection>('End_Start')
    if(props.isShowSlots) var onClickBackStart = inject('End_Start')
    // const onClickBackStart = inject('End_Start')
    const emits = defineEmits(["addsession","refresh","aiassist"]);
    const scrollbarRef = ref();
    const contentRef = ref();  
    // 控制滚动到下面 显示
    const btnshow = ref(false);  
    // 控制新建会话是否显示
    const addshow = ref(false);  
    // 复制
    async function copyText(item:any) {
        try{
            await toClipboard(item.ai);
            ElMessage.success('复制成功')
        }catch(err){
            ElMessage.error('复制失败')
        }
        
    }
    // 新建会话函数
    function addsession(){
        // 清空页面时 先把滚到底部隐藏了
        btnshow.value = false;
        emits('addsession',true)
    }
    //  回到底部
    function scrollBottom(){
      // 确保 DOM 元素已渲染  
      if (contentRef.value) {  
        // 滚动到底部  
        scrollbarRef.value.scrollTo({  
          top:contentRef.value.scrollHeight,  
          behavior: 'smooth', // 平滑滚动  
        });  
      } 
    }
    //监听滚动条事情   
    function handleScroll(){
        // 获取窗口滚动的高度+   
        const scrolltop = scrollbarRef.value.scrollTop*1 + scrollbarRef.value.offsetHeight*1;
        // 列表内容的高度
        const cnetertop = contentRef.value.scrollHeight*1;
        if (scrolltop>=cnetertop) {
            btnshow.value = false;
        }else if(scrolltop<cnetertop){
            btnshow.value = true;
        }
    }
    // 刷新最新一个ai回复
    function onRefresh(index: number,item: any){
        emits('refresh',props.dialogueList[index].user,false)
    }
    // 请求AI协助 调用方法 传给父组件
    function onClcikAssist(index: number){
        emits('aiassist',props.dialogueList[index].ai)
    }
    // 判断用户的表情
    function expression(emotion:any){
        switch (emotion) {
            case '愤怒':
                return '/images/img/emotion/emotion_anger_32.png';
            case '稍有不满':
                return '/images/img/emotion/emotion_dissatisfy_32.png';
            case '辱骂':
                return '/images/img/emotion/emotion_abuse_32.png';
            case '高兴':
                return '/images/img/emotion/emotion_smile_32.png';
            case '不耐烦':
                return '/images/img/emotion/emotion_impatient_32.png';
            case '一般':
                return '/images/img/emotion/emotion_normal_32.png';
            default:
                return '';
        }
    }
    //AI直接回答
    function onClickDirectAnswer(){
        ElMessage.success('AI直接回答')
    }
    // 传给爷组件 客服训练 结束训练
    function onClickEnd(){
        onClickStart(false)
    }
    //结束卡槽反问会话
    function onClickBackEnd(){
        onClickBackStart(false)
    }
    
    // 页面初始化时
    onMounted(()=>{
        if (contentRef.value.scrollHeight>scrollbarRef.value.scrollHeight) {
            btnshow.value = true;
        }else if(contentRef.value.scrollHeight<=scrollbarRef.value.scrollHeight){
            btnshow.value = false;
        }
    }) 
    watch(()=>props.disabledvalue,(newValue:any,oldValue:any)=>{
        addshow.value = newValue;        
    },{immediate:true,deep:true})
    // 监听数组的变化 好让向下滚动  

    watch(props.dialogueList,(newValue:any, oldValue:any) => {
        nextTick(() => {
            if (contentRef.value.scrollHeight>=scrollbarRef.value.scrollHeight) {
                btnshow.value = false;
                if (contentRef.value) {  
                    // 滚动到底部  
                    scrollbarRef.value.scrollTo({  
                    top:scrollbarRef.value.scrollHeight,  
                    behavior: 'smooth', // 平滑滚动
                });  
                } 
            }else if(contentRef.value.scrollHeight<scrollbarRef.value.scrollHeight){
                btnshow.value = false;
            }
        });
    },{deep: true})
</script>

<!-- AI回复页面 -->
<template>
    <section class="center-list" ref="scrollbarRef" @scroll.native="handleScroll">
        <div class=" conversation-item w-full h-full m-auto">
            <div  ref="contentRef">
                <div v-for="(item,index) in props.dialogueList" :key="index">
                    <div v-show="item.user" class="flex flex-col">
                        <div class="flex self-end p-2.5 m-1.5  max-box">
                            <div class="cont-box p-2.5 m-1.5 relative rounded-lg">
                                <div class="user-triangle absolute "></div>
                                {{ item.user }}
                            </div>
                            <div class="w-11 h-11 ml-2.5 relative">
                                <div class="emote-box absolute" v-show="item.emotion&&item.emotion!=''"><img class="w-6 h-6" :src='expression(item.emotion)'  alt=""></div>
                                <img src="/src/assets/images/seat_circle_64..png" v-show="props.sessionType==20" alt="" class="w-11 h-full rounded">
                                <img src="/src/assets/images/user_rect.png" v-show="props.sessionType==10||props.sessionType==30" alt="" class="w-11 h-full rounded">
                            </div>
                        </div>
                    </div>
                    <div v-show="item.ai" class="flex flex-col">
                        <div class="flex self-start p-2.5  max-box" >
                            <div class="w-11 h-11 mr-2.5">
                                <img src="/src/assets/images/user_rect.png" v-show="props.sessionType==20" alt="" class="w-11 h-full rounded">
                                <img src="/src/assets/images/robot_circle.png" v-show="props.sessionType==10||props.sessionType==30" alt="" class="w-11 h-full rounded">
                            </div>
                            <!-- loat 是流式输出 -->
                            <div class="ai-answer p-2.5 m-1.5 relative rounded-lg" >
                                <div class="ai-triangle absolute"></div>
                                <span v-show="item.loat" class="flex items-center"><img :src="avatarImg" alt="" class="w-5 h-5 mr-1">{{ item.ai }}</span>
                                <span v-show="!item.loat" style=" white-space: pre-line;"> {{ item.ai }}</span>
                                <div  class="hide rounded-lg flex  justify-end items-center" v-show="props.sessionType==10">
                                    <div>
                                        <el-tooltip
                                                class="box-item"
                                                effect="dark"
                                                content="点击可复制"
                                                placement="top"
                                            >
                                            <el-icon class="cursor-pointer" @click="copyText(item)"><DocumentCopy /></el-icon>
                                        </el-tooltip>
                                        <!-- <el-tooltip
                                                class="box-item"
                                                effect="dark"
                                                content="暂时不实现"
                                                placement="top"
                                            >
                                        <el-icon class="mx-2 cursor-pointer" ><Edit /></el-icon>
                                        </el-tooltip> -->
                                        <el-tooltip
                                                class="box-item"
                                                effect="dark"
                                                content="重新回答"
                                                placement="top"
                                            >
                                            <div class="inline-block">
                                                <el-icon class="cursor-pointer ml-2" v-if="index==props.dialogueList.length-1&&item.user!=''" @click="onRefresh(index,item)"><RefreshRight /></el-icon>
                                            </div>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--辅助回答 才显示这一行 titleshow 是控制显示请求AI协助还是回答内容  isshow是输出完成后在加载按钮-->
                        <div class="pl-16.5 flex  cursor-pointer" v-show="index==props.dialogueList.length-1&&item.aiassist!=''">
                            <img src="/src/assets/images/robot_circle.png" alt="" class="w-7.5 h-full">
                            <span @click="onClcikAssist(index)" class="ml-1.5  line-text" v-show="item.titleshow">{{item.aiassist}}</span>
                            <span class="ml-1.5  p-2.5 list-line" v-show="!item.titleshow">
                               <span v-show="item.ailoading" class="flex items-center"><img :src="avatarImg" alt="" class="w-5 h-5 mr-1">{{item.aiassist}}</span>
                               <span v-show="!item.ailoading"  style="white-space: pre-line;">
                                    {{item.aiassist}}
                                    <div  class="py-1" v-if="item.isshow">
                                        <el-button type="primary"  @click="onClickDirectAnswer">AI直接回答</el-button>
                                    </div>
                               </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 会话按钮 -->
            <div class="absolute btn-session" v-if="!addshow">
                <el-button :icon="Plus"  @click="addsession">新建会话</el-button>
            </div>
            <div class="absolute btn-end" v-if="props.customertran&&!addshow">
                <el-button type="danger"  @click="onClickEnd">结束训练</el-button>
            </div>
            <div class="absolute btn-end" v-if="props.isShowSlots&&!addshow">
                <el-button type="danger"  @click="onClickBackEnd">结束反问</el-button>
            </div>
            <!-- 滚动底部-->
            <div class="goBottom absolute" @click="scrollBottom"  v-if="btnshow&&!addshow">
                <svg-icon icon-class="bacl-top" class="normal" />
                <svg-icon icon-class="hover-bacl" class="hover" />
            </div>
        </div>
    </section>
</template>

<style scoped>
.conversation-item{
    max-width: 872px;
}
.center-list{
    width: 100%;
    height: 100%;
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: scroll;
    /* padding-bottom: 30px; */
    scrollbar-width: none;
    
}
.el-icon:hover {
  color: #409eff;
}
.max-box{
    max-width: 70%;
}
.btn-session{
    bottom: 80px;
}
.btn-end{
    left: calc((100% - 632px) / 2);
    bottom: 80px;
}
.goBottom{
    right: calc((100% - 872px) / 2);
    bottom: 80px;
    width: 35px;
    height: 35px;
    box-shadow: 0 4px 12px 0 rgba(17, 49, 95, .04);
    cursor: pointer;
    transition: all .2s linear;
    opacity: 1;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #D3D7DD;
    background:#FFFFFF;
}
.normal{
    display: block;
}
.hover{
    display: none;
}
.goBottom:hover{
    background: #f6f7f9;
}
.goBottom:hover .normal{
    display: none;
}
.goBottom:hover .hover{
    display: block;
}
.ai-answer{
    background-color:var(--v-ai-custmer-bg-color,#434346);
    color: var(--v-txt_icon_black_2, #1a2029);
}
.ai-triangle{
    width: 0;
    height: 0;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid var(--v-chat_box_shadow_1);
    top: 8px;
    left: -10px;
}
.cont-box{
    background-color: var(--v-user-bg-color);
    color: var(--v-txt_icon_black_2, #1a2029);
}
.hide{
    position: absolute;
    opacity: 0;
    padding: 16px 10px;
    font-size: 20px;
    left: 0;
    width: 100%;
    background-color: var(--v-hover-bg-color);
    transform: translateY(-10%);
    transition: transform 0.5s ease;
    height: 20px;
}
.ai-answer:hover{
    cursor: pointer;
    background-color: var(--v-hover-bg-color);
}
.ai-answer:hover .ai-triangle{
    border-top: 10px solid var(--v-hover-bg-color);
}
.ai-answer:hover .hide{
    transform: translateY(0);
    opacity: 100;
}
.user-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid var(--v-user-bg-color);
    top: 8px;
    right: -10px;
}
.emote-box{
    right: -10px;
    top: -10px;
}
.list-line{
    color: #4FA5FE;
    background-color:var(--v-list-line-color);
    box-shadow:0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
    border-radius: 4px;
}
.line-text{
    color: #4FA5FE;
}
</style>